<template>
	<div>
		<el-row :span="24" style="margin:26px 0 0;">
			<el-form :inline="true" :model="formInline" class="demo-form-inline" label-width="100px">
				<el-form-item label="商户名称">
					<el-input v-model="formInline.storeName"></el-input>
				</el-form-item>
				<el-form-item label="时间:">
					<el-date-picker type="date" placeholder="开始时间" v-model="startTime" style="width:180px;"></el-date-picker>
					到
					<el-date-picker type="date" placeholder="结束时间" v-model="endTime" style="width:180px;"></el-date-picker>
				</el-form-item>
				<el-form-item label="按提现状态:">
					<el-col :span="18">
						<el-select v-model="formInline.orderStatus">
							<el-option v-for="item in orderStatusList" :label="item.label" :value="item.value"></el-option>
						</el-select>
					</el-col>

				</el-form-item>
				<el-button type="primary" @click="fetchData(1)">查询</el-button>
				<el-button type="primary" @click="deriveSubmit()">导出</el-button>
			</el-form>
		</el-row>
		<div>
			<el-table :data="pageInfo.dtos" v-loading="table_loading" element-table_loading-text="加载中" style="width: 100%;">
				<el-table-column label="商户名称" prop='storeName'>
				</el-table-column>
				<el-table-column label="交易金额" prop='orderAmt'>
				</el-table-column>
				<el-table-column label="转账金额总额">
					<template scope="scope">
						<div>{{scope.row.orderDiscountAmt | moneyTwo}}</div>
					</template>
				</el-table-column>
				<el-table-column label="待转账金额">
					<template scope="scope">
						<div>{{scope.row.notTranferAmt | moneyTwo}}</div>
					</template>
				</el-table-column>
				<el-table-column label="已转账金额">
					<template scope="scope">
						<div>{{scope.row.tranferAmt | moneyTwo}}</div>
					</template>
				</el-table-column>
				<el-table-column label="冻结金额">
					<template scope="scope">
						<div>{{scope.row.frozenAmt | moneyTwo}}</div>
					</template>
				</el-table-column>

				<!-- <el-table-column label="转账状态">
					<template scope="scope">
						<p v-if="scope.row.orderStatus == 'N'">未转账</p>
						<p v-if="scope.row.orderStatus == 'Y'">已转账</p>
					</template>
				</el-table-column> -->

				</el-table-column>
				<el-table-column label="操作" width="400">
					<template scope="scope">
						<el-button type="primary" size="small" @click="navToDetail(scope.row)">明细
						</el-button>
						<!-- 						<el-button type="primary" size="small" @click="confirmCash(scope.row)">转账
						</el-button> -->
						<el-button type="primary" size="small" @click="navToStoreCashList(scope.row)">提现记录
						</el-button>
						<el-button type="primary" size="small" @click="navToTodayDetail(scope.row)">日统计
						</el-button>
					</template>
				</el-table-column>
			</el-table>
			<div class="paginate">
				<el-pagination @current-change="handleCurrentChange" :current-page="pageInfo.pageNum" :page-size="pageInfo.pageSize"
				 layout="total, prev, pager, next, jumper" :total="pageInfo.count">
				</el-pagination>
			</div>
		</div>

		<div>
			<el-dialog custom-class="newDialog" title="转账明细" :visible.sync="dialogVisibleCash" width="60%">
				<div style="font-size: 18px;">
					<div>
						<el-row :span="24" style="margin:0px 0 0;">
							<el-form :inline="true" :model="formInlineCash" class="demo-form-inline" label-width="100px">
								<!-- <el-form-item label="商户名称">
									<el-input v-model="formInlineCash.storeName"></el-input>
								</el-form-item> -->
								<el-form-item label="时间:">
									<el-select style="width: 166px;" v-model="formInlineCash.flag">
										<el-option v-for="item in flagList" :label="item.label" :value="item.value"></el-option>
									</el-select>
									<el-date-picker type="date" placeholder="开始时间" v-model="startTimeCash" style="width:180px;"></el-date-picker>
									到
									<el-date-picker type="date" placeholder="结束时间" v-model="endTimeCash" style="width:180px;"></el-date-picker>
								</el-form-item>
								<el-form-item label="按转账状态:">
									<el-col :span="18">
										<el-select v-model="formInlineCash.orderStatus">
											<el-option v-for="item in orderStatusList" :label="item.label" :value="item.value"></el-option>
										</el-select>
									</el-col>

								</el-form-item>
								<el-button type="primary" @click="fetchDataCash(1)">查询</el-button>
								<el-button type="primary" @click="deriveSubmitCash()">导出</el-button>
							</el-form>
						</el-row>
					</div>
					<el-table :data="pageInfoCash.dtos" v-loading="table_loadingCash" element-table_loading-text="加载中" style="width: 100%;">
						<el-table-column label="商品名称" width="200" prop='goodsName'>
							<template scope="scope">
								<div style="display: flex;justify-content: space-between;padding: 10px;">
									<span style="align-self: center;">{{scope.row.goodsName}}</span>
									<img style="width: 80px;" :src="scope.row.goodsIcon" alt="">
								</div>
							</template>
						</el-table-column>
						<el-table-column width="120px" label="商品数量" prop='goodsNum'>
						</el-table-column>

						<el-table-column width="180px" label="商户金额" prop='orderDiscountAmt'>
						</el-table-column>

						<el-table-column label="订单号" prop='orderId'>
						</el-table-column>
						<el-table-column label="交易金额" prop='orderAmt'>
						</el-table-column>
						<el-table-column label="确认时间" prop='okTime'>
						</el-table-column>

						<el-table-column label="订单状态">
							<template scope="scope">
								<p v-if="scope.row.orderState == 'W'">已完成</p>
								<p v-if="scope.row.orderState == 'C'">交易关闭</p>
								<p v-if="scope.row.orderState == 'Z'">交易中</p>
							</template>
						</el-table-column>
						<el-table-column label="转账状态">
							<template scope="scope">
								<p v-if="scope.row.orderStatus == 'N'">待转账</p>
								<p v-if="scope.row.orderStatus == 'Y'">已转账</p>
							</template>
						</el-table-column>
						<!-- 						<el-table-column label="操作">
							<template scope="scope">
								<el-button type="primary" size="small" @click="navToCash(scope.row)">提现
								</el-button>
							</template>
						</el-table-column> -->
					</el-table>
					<div class="paginate">
						<el-pagination @current-change="handleCurrentCashChange" :current-page="pageInfoCash.pageNum" :page-size="pageInfoCash.pageSize"
						 layout="total, prev, pager, next, jumper" :total="pageInfoCash.count">
						</el-pagination>
					</div>
				</div>
			</el-dialog>
		</div>


		<el-dialog custom-class="newDialog" title="日统计明细" :visible.sync="dialogVisibleToday" width="60%">
			<div style="font-size: 18px;">
				<div>
					<el-row :span="24" style="margin:0px 0 0;">
						<el-form :inline="true" :model="formInlineToday" class="demo-form-inline" label-width="100px">
							<!-- <el-form-item label="商户名称">
								<el-input v-model="formInlineCash.storeName"></el-input>
							</el-form-item> -->
							<el-form-item label="选择日期:">
								<el-select style="width: 166px;" v-model="formInlineToday.flag">
									<el-option v-for="item in flagList" :label="item.label" :value="item.value"></el-option>
								</el-select>
								<el-date-picker type="date" placeholder="开始时间" v-model="startTimeToday" style="width:180px;"></el-date-picker>
								到
								<el-date-picker type="date" placeholder="结束时间" v-model="endTimeToday" style="width:180px;"></el-date-picker>
							</el-form-item>
							<br>
							<el-form-item label="按转账状态:">
								<el-select v-model="formInlineToday.orderStatus" style="width: 166px;">
									<el-option v-for="item in orderStatusList" :label="item.label" :value="item.value"></el-option>
								</el-select>
							</el-form-item>
							<el-button type="primary" @click="fetchDataToday(1)">查询</el-button>
						</el-form>
					</el-row>
				</div>
				<el-table :data="pageInfoToday.dtos" v-loading="table_loadingToday" element-table_loading-text="加载中" style="width: 100%;">
					<el-table-column label="商户名称" prop='storeName'>
					</el-table-column>
					<el-table-column label="支付日期" prop='payTime'>
					</el-table-column>
					<el-table-column label="收货日期" prop='okTime'>
					</el-table-column>
					<el-table-column label="转账日期" prop='tranferTime'>
					</el-table-column>
					<el-table-column label="交易金额" prop='orderAmt'>
					</el-table-column>
					<el-table-column label="转账金额总额">
						<template scope="scope">
							<div>{{scope.row.orderDiscountAmt | moneyTwo}}</div>
						</template>
					</el-table-column>
					<el-table-column label="待转账金额">
						<template scope="scope">
							<div>{{scope.row.notTranferAmt | moneyTwo}}</div>
						</template>
					</el-table-column>

					<el-table-column label="冻结金额">
						<template scope="scope">
							<div>{{scope.row.frozenAmt | moneyTwo}}</div>
						</template>
					</el-table-column>
					<el-table-column label="转账状态">
						<template scope="scope">
							<p v-if="scope.row.orderStatus == 'N'">待转账</p>
							<p v-if="scope.row.orderStatus == 'Y'">已转账</p>
						</template>
					</el-table-column>
					<!-- 						<el-table-column label="操作">
						<template scope="scope">
							<el-button type="primary" size="small" @click="navToCash(scope.row)">提现
							</el-button>
						</template>
					</el-table-column> -->
				</el-table>
				<div class="paginate">
					<el-pagination @current-change="handleCurrentTodayChange" :current-page="pageInfoToday.pageNum" :page-size="pageInfoToday.pageSize"
					 layout="total, prev, pager, next, jumper" :total="pageInfoToday.count">
					</el-pagination>
				</div>
			</div>
		</el-dialog>

		<div>
			<el-dialog title="转账" :visible.sync="dialogVisibleConfirmCash" width="45%">
				<div style="font-size: 18px;">
					<div>
						<el-form :inline="true" :model="ConfirmCashInfo" class="demo-form-inline" label-width="100px">
							<el-form-item label="转账金额">
								<el-input v-model="ConfirmCashInfo.orderDiscountAmt"></el-input>
							</el-form-item>
							<el-form-item label="货款日期">
								<el-date-picker value-format="yyyy-MM-dd HH:mm:ss" format="yyyy-MM-dd HH:mm:ss" @change="getNewDate" v-model="okTime"
								 type="date" :picker-options="pickerOptions0" placeholder="选择货款日期">
								</el-date-picker>
							</el-form-item>

							<el-button type="primary" @click="ConfirmCashAmt">确认转账</el-button>
						</el-form>
					</div>
				</div>
			</el-dialog>
			<el-dialog title="身份验证" :visible.sync="dialogVisibleVerifyPswd" width="45%">
				<div style="font-size: 18px;">
					<div>
						<el-form :inline="true" :model="userInfo" class="demo-form-inline" label-width="100px">
							<el-form-item label="当前账户密码">
								<el-input v-model="userInfo.pswd"></el-input>
							</el-form-item>
							<el-button type="primary" @click="verifyPswd">确认转账</el-button>
						</el-form>
					</div>
				</div>
			</el-dialog>
		</div>

	</div>
</template>

<script>
	export default {
		data() {
			return {
				startTime: '',
				endTime: '',
				startTimeCash: '',
				endTimeCash: '',
				formInline: {
					pageNum: 1,
					pageSize: 10,
					storeId: '',
					storeName: '',
					orderStatus: '',
					okTimeStart: '',
					okTimeEnd: '',
					sort: 'T.ok_time',
					desc: 'desc',
				},
				dialogVisibleCash: false,
				table_loading: false,
				table_loadingCash: false,
				pageInfo: {
					pageNum: 1,
					pageSize: 10,
					count: 1,
					dtos: []
				},
				userInfo: {
					pswd: ''
				},
				verIfy: '556640',
				dialogVisibleVerifyPswd: false,
				formInlineCash: {
					pageNum: 1,
					pageSize: 10,
					storeId: '',
					storeName: '',
					orderStatus: '',
					okTimeStart: '',
					okTimeEnd: '',
					sort: 'pay_time',
					desc: 'desc',
					flag: '',
				},
				pageInfoCash: {
					pageNum: 1,
					pageSize: 10,
					count: 1,
					dtos: []
				},
				flagList: [{
						value: '0',
						label: '按付款时间'
					}, {
						value: '1',
						label: '按收货时间'
					},
					{
						value: '2',
						label: '按已转账时间'
					},
					{
						value: '3',
						label: '按待转账时间'
					}
				],
				orderStatusList: [{
					value: '',
					label: '全部'
				}, {
					value: 'N',
					label: '未转账'
				}, {
					value: 'Y',
					label: '已转账'
				}],
				dialogVisibleConfirmCash: false,
				ConfirmCashInfo: {},
				ConfirmCashNum: '',
				okTime: '',
				pickerOptions0: {
					disabledDate(time) {
						return time.getTime() > Date.now()
					}
				},
				dialogVisibleToday: false,
				formInlineToday: {
					pageNum: 1,
					pageSize: 10,
					storeId: '',
					storeName: '',
					orderStatus: '',
					okTimeStart: '',
					okTimeEnd: '',
					sort: 'T.pay_time',
					desc: 'desc',
					flag: ''
				},
				pageInfoToday: {
					pageNum: 1,
					pageSize: 10,
					count: 1,
					dtos: []
				},
				startTimeToday: '',
				endTimeToday: '',
				table_loadingToday: false
			}
		},
		created() {
			this.fetchData(1)
		},
		filters: {
			moneyTwo(val) {
				let money = Math.floor(val * 100) / 100
				return money
			}
		},
		methods: {
			chooseTimeRange(t) {
				console.log(t); //结果为一个数组，如：["2018-08-04", "2018-08-06"]
			},
			fetchData(page = 1) {
				let vm = this
				if (vm.startTime && this.endTime) {
					vm.formInline.okTimeStart = dateFormat(vm.startTime)
					vm.formInline.okTimeEnd = dateFormat(vm.endTime)
					if (vm.formInline.okTimeStart > vm.formInline.okTimeEnd) {
						vm.$message({
							type: 'warning',
							message: '开始时间不能大于结束时间'
						});
						return;
					}
				} else {
					vm.formInline.okTimeStart = ''
					vm.formInline.okTimeEnd = ''
				}
				vm.table_loading = true
				vm.pageInfo.pageNum = page
				vm.formInline.pageNum = page
				vm.dataApi.ajax('tranferSumList', vm.formInline, res => {
					vm.table_loading = false
					let data = JSON.parse(JSON.stringify(res))
					vm.pageInfo.dtos = data.lists
					vm.pageInfo.count = data.count
				});
			},
			handleCurrentChange(val) {
				this.fetchData(val)
			},
			handleCurrentCashChange(val) {
				this.fetchDataCash(val)
			},
			navToCash(item) {
				let data = {
					userId: item.userId,
					transferAmount: item.orderAmt
				}
				this.dataApi.ajax('storeTransfer', data, res => {
					if (res.responseType === 'S') {
						console.log(res)
					}
				});
			},
			fetchDataCash(page = 1) {
				let vm = this
				if (vm.startTimeCash && vm.endTimeCash) {
					vm.formInlineCash.okTimeStart = dateFormat(vm.startTimeCash)
					vm.formInlineCash.okTimeEnd = dateFormat(vm.endTimeCash).substring(0, 11) + '23:59:59'
					if (vm.formInlineCash.okTimeStart > vm.formInlineCash.okTimeEnd) {
						vm.$message({
							type: 'warning',
							message: '开始时间不能大于结束时间'
						});
						return;
					}
				} else {
					vm.formInlineCash.okTimeStart = ''
					vm.formInlineCash.okTimeEnd = ''
				}
				vm.table_loadingCash = true
				vm.pageInfoCash.pageNum = page
				vm.formInlineCash.pageNum = page
				vm.dataApi.ajax('tranferOrderList', vm.formInlineCash, res => {
					vm.table_loadingCash = false
					let data = JSON.parse(JSON.stringify(res))
					vm.pageInfoCash.dtos = data.lists
					vm.pageInfoCash.count = data.count
				});
			},
			navToDetail(data) {
				this.formInlineCash.storeId = data.storeId
				this.dialogVisibleCash = true
				this.fetchDataCash(1)
			},
			navToTodayDetail(data) {
				this.formInlineToday.storeId = data.storeId
				this.dialogVisibleToday = true
				this.fetchDataToday(1)
			},
			handleCurrentTodayChange(val) {
				this.fetchDataToday(val)
			},
			// 日统计明细
			fetchDataToday(page = 1) {
				let vm = this
				if (vm.startTimeToday && vm.endTimeToday) {
					vm.formInlineToday.okTimeStart = dateFormat(vm.startTimeToday)
					vm.formInlineToday.okTimeEnd = dateFormat(vm.endTimeToday).substring(0, 11) + '23:59:59'
					if (vm.formInlineToday.okTimeStart > vm.formInlineToday.okTimeEnd) {
						vm.$message({
							type: 'warning',
							message: '开始时间不能大于结束时间'
						});
						return;
					}
				} else {
					vm.formInlineToday.okTimeStart = ''
					vm.formInlineToday.okTimeEnd = ''
				}

				vm.pageInfoToday.pageNum = page
				vm.formInlineToday.pageNum = page
				vm.table_loadingToday = true
				vm.dataApi.ajax('tranferSumOneList', vm.formInlineToday, res => {
					vm.table_loadingToday = false
					let data = JSON.parse(JSON.stringify(res))
					vm.pageInfoToday.dtos = data.lists
					vm.pageInfoToday.count = data.count
				});
			},
			confirmCash(item) {
				this.dialogVisibleConfirmCash = true
				this.ConfirmCashInfo = JSON.parse(JSON.stringify(item))
				this.ConfirmCashInfo.orderDiscountAmt = Math.floor(this.ConfirmCashInfo.orderDiscountAmt * 100) / 100
				this.ConfirmCashNum = JSON.parse(JSON.stringify(item.orderDiscountAmt))
				console.log(this.ConfirmCashInfo)
				return

			},
			verifyPswd() {
				if (this.verIfy === this.userInfo.pswd) {
					this.dialogVisibleVerifyPswd = false
					let data = {
						storeId: this.ConfirmCashInfo.storeId,
						transferAmount: this.ConfirmCashInfo.orderDiscountAmt,
						okTime: this.okTime
					}
					this.dataApi.ajax('storeTransfer', data, res => {
						if (res.responseType === 'S') {
							this.showMsg('转账成功')
							this.fetchDataToday(1)
							this.userInfo = {
								pswd: ''
							}
							this.dialogVisibleConfirmCash = false
						}
					});
				} else {
					this.showMsg('密码错误请重新输入')
				}
			},
			ConfirmCashAmt() {
				if (this.ConfirmCashNum < this.ConfirmCashInfo.orderDiscountAmt) {
					this.showMsg('转账金额不能大于待转账金额')
					return
				}
				this.dialogVisibleVerifyPswd = true
				return

			},
			navToStoreCashList(item) {
				this.$router.push({
					path: '/finance/cash_history_list',
					query: {
						id: item.storeId
					}
				})
			},
			getNewDate(e) {
				if (e != undefined) {
					let str = e.substring(0, 11)
					this.okTime = str + '23:59:59'
				}

			},
			deriveSubmit() {
				let vm = this
				let okTimeStart = ''
				let okTimeEnd = ''
				let orderStatus = vm.formInline.orderStatus
				let storeName = vm.formInline.storeName
				let storeId = vm.formInline.storeId
				if (vm.startTime > vm.endTime) {
					this.showMsg('开始时间不能大于结束时间', 'warning');
					return;
				}
				if (vm.startTime && vm.endTime) {
					okTimeStart = dateFormat(vm.startTime)
					okTimeEnd = dateFormat(vm.endTime)
				} else {
					okTimeStart = ''
					okTimeEnd = ''
				}

				// if (vm.startTime&&!vm.endTime) {
				//   okTimeStart = ''
				// }
				// if (!vm.startTime&&vm.endTime) {
				//   okTimeEnd = ''
				// }
				let host = 'https://console.hzsuhu.cn/enve'
				location.href = encodeURI(encodeURI(host + "/WithdrawControl/exportTransfer?okTimeStart=" + okTimeStart +
					'&okTimeEnd=' + okTimeEnd + '&orderStatus=' + orderStatus + '&storeName=' + storeName + '&storeId=' + storeId))
			},
			deriveSubmitCash() {
				let vm = this
				let okTimeStart = ''
				let okTimeEnd = ''
				let orderStatus = vm.formInlineCash.orderStatus
				let storeName = vm.formInlineCash.storeName
				let storeId = vm.formInlineCash.storeId
				if (vm.startTimeCash > vm.endTimeCash) {
					this.showMsg('开始时间不能大于结束时间', 'warning');
					return;
				}

				if (vm.startTime && vm.endTime) {
					okTimeStart = dateFormat(vm.startTimeCash)
					okTimeEnd = dateFormat(vm.endTimeCash)
				}
				// if (!vm.startTime&&vm.endTime) {
				//   okTimeEnd = ''
				// }
				let host = 'https://console.hzsuhu.cn/enve'
				location.href = encodeURI(encodeURI(host + "/WithdrawControl/exportTransfer?okTimeStart=" + okTimeStart +
					'&okTimeEnd=' + okTimeEnd + '&orderStatus=' + orderStatus + '&storeName=' + storeName + '&storeId=' + storeId))
			}
		}
	}
</script>

<style>
	.newDialog .el-dialog__body {
		padding-top: 10px !important;
	}

	.newDialog .el-form-item {
		margin-bottom: 5px;
	}
</style>
